<template>
  <div id="appraise">
    <div class="estimate">
        <div class="see">
            <div class="r-see">
                <h1>4.6</h1>
                <p>综合评价</p>
                <p>高于周边商家77.5%</p>
            </div>
            <div class="l-see">
                <div class="attitude">
                    <p>服务态度</p>
                    <div>
                        <span><svg viewBox="0 0 22 22" id="rating-star" width="100%" height="100%"><path fill-rule="evenodd" d="M10.986 17.325l-5.438 3.323c-1.175.718-1.868.208-1.55-1.126l1.48-6.202-4.84-4.15c-1.046-.895-.775-1.71.59-1.82l6.353-.51L10.03.95c.53-1.272 1.39-1.266 1.915 0l2.445 5.89 6.353.51c1.372.11 1.632.93.592 1.82l-4.84 4.15 1.478 6.202c.32 1.34-.38 1.84-1.55 1.126l-5.437-3.323z"></path></svg></span>
                        <span><svg viewBox="0 0 22 22" id="rating-star" width="100%" height="100%"><path fill-rule="evenodd" d="M10.986 17.325l-5.438 3.323c-1.175.718-1.868.208-1.55-1.126l1.48-6.202-4.84-4.15c-1.046-.895-.775-1.71.59-1.82l6.353-.51L10.03.95c.53-1.272 1.39-1.266 1.915 0l2.445 5.89 6.353.51c1.372.11 1.632.93.592 1.82l-4.84 4.15 1.478 6.202c.32 1.34-.38 1.84-1.55 1.126l-5.437-3.323z"></path></svg></span>
                        <span><svg viewBox="0 0 22 22" id="rating-star" width="100%" height="100%"><path fill-rule="evenodd" d="M10.986 17.325l-5.438 3.323c-1.175.718-1.868.208-1.55-1.126l1.48-6.202-4.84-4.15c-1.046-.895-.775-1.71.59-1.82l6.353-.51L10.03.95c.53-1.272 1.39-1.266 1.915 0l2.445 5.89 6.353.51c1.372.11 1.632.93.592 1.82l-4.84 4.15 1.478 6.202c.32 1.34-.38 1.84-1.55 1.126l-5.437-3.323z"></path></svg></span>
                        <span><svg viewBox="0 0 22 22" id="rating-star" width="100%" height="100%"><path fill-rule="evenodd" d="M10.986 17.325l-5.438 3.323c-1.175.718-1.868.208-1.55-1.126l1.48-6.202-4.84-4.15c-1.046-.895-.775-1.71.59-1.82l6.353-.51L10.03.95c.53-1.272 1.39-1.266 1.915 0l2.445 5.89 6.353.51c1.372.11 1.632.93.592 1.82l-4.84 4.15 1.478 6.202c.32 1.34-.38 1.84-1.55 1.126l-5.437-3.323z"></path></svg></span>
                        <span><svg viewBox="0 0 22 22" id="rating-star" width="100%" height="100%"><path fill-rule="evenodd" d="M10.986 17.325l-5.438 3.323c-1.175.718-1.868.208-1.55-1.126l1.48-6.202-4.84-4.15c-1.046-.895-.775-1.71.59-1.82l6.353-.51L10.03.95c.53-1.272 1.39-1.266 1.915 0l2.445 5.89 6.353.51c1.372.11 1.632.93.592 1.82l-4.84 4.15 1.478 6.202c.32 1.34-.38 1.84-1.55 1.126l-5.437-3.323z"></path></svg></span>
                    </div>
                    <p class="math">4.7</p>
                </div>
                <div class="cuisine">
                    <p>菜品评价</p>
                    <div>
                        <span><svg viewBox="0 0 22 22" id="rating-star" width="100%" height="100%"><path fill-rule="evenodd" d="M10.986 17.325l-5.438 3.323c-1.175.718-1.868.208-1.55-1.126l1.48-6.202-4.84-4.15c-1.046-.895-.775-1.71.59-1.82l6.353-.51L10.03.95c.53-1.272 1.39-1.266 1.915 0l2.445 5.89 6.353.51c1.372.11 1.632.93.592 1.82l-4.84 4.15 1.478 6.202c.32 1.34-.38 1.84-1.55 1.126l-5.437-3.323z"></path></svg></span>
                        <span><svg viewBox="0 0 22 22" id="rating-star" width="100%" height="100%"><path fill-rule="evenodd" d="M10.986 17.325l-5.438 3.323c-1.175.718-1.868.208-1.55-1.126l1.48-6.202-4.84-4.15c-1.046-.895-.775-1.71.59-1.82l6.353-.51L10.03.95c.53-1.272 1.39-1.266 1.915 0l2.445 5.89 6.353.51c1.372.11 1.632.93.592 1.82l-4.84 4.15 1.478 6.202c.32 1.34-.38 1.84-1.55 1.126l-5.437-3.323z"></path></svg></span>
                        <span><svg viewBox="0 0 22 22" id="rating-star" width="100%" height="100%"><path fill-rule="evenodd" d="M10.986 17.325l-5.438 3.323c-1.175.718-1.868.208-1.55-1.126l1.48-6.202-4.84-4.15c-1.046-.895-.775-1.71.59-1.82l6.353-.51L10.03.95c.53-1.272 1.39-1.266 1.915 0l2.445 5.89 6.353.51c1.372.11 1.632.93.592 1.82l-4.84 4.15 1.478 6.202c.32 1.34-.38 1.84-1.55 1.126l-5.437-3.323z"></path></svg></span>
                        <span><svg viewBox="0 0 22 22" id="rating-star" width="100%" height="100%"><path fill-rule="evenodd" d="M10.986 17.325l-5.438 3.323c-1.175.718-1.868.208-1.55-1.126l1.48-6.202-4.84-4.15c-1.046-.895-.775-1.71.59-1.82l6.353-.51L10.03.95c.53-1.272 1.39-1.266 1.915 0l2.445 5.89 6.353.51c1.372.11 1.632.93.592 1.82l-4.84 4.15 1.478 6.202c.32 1.34-.38 1.84-1.55 1.126l-5.437-3.323z"></path></svg></span>
                        <span><svg viewBox="0 0 22 22" id="rating-star" width="100%" height="100%"><path fill-rule="evenodd" d="M10.986 17.325l-5.438 3.323c-1.175.718-1.868.208-1.55-1.126l1.48-6.202-4.84-4.15c-1.046-.895-.775-1.71.59-1.82l6.353-.51L10.03.95c.53-1.272 1.39-1.266 1.915 0l2.445 5.89 6.353.51c1.372.11 1.632.93.592 1.82l-4.84 4.15 1.478 6.202c.32 1.34-.38 1.84-1.55 1.126l-5.437-3.323z"></path></svg></span>
                    </div>
                    <p class="math">4.6</p>
                </div>
                <p class="d-time"><span>送达时间</span><span>29分钟</span></p>
            </div>
        </div>
        <div class="talk">
            <div class="choose">
                <ul>
                    <li class="move">全部(672)</li>
                    <li>满意(654)</li>
                    <li>不满意(18)</li>
                    <li>有图(5)</li>
                    <li>送货快(15)</li>
                </ul>
            </div>
            <div class="say">
                    <div class="user">
                        <div class="img">
                            <img src="https://fuss10.elemecdn.com/f/2e/20a4300d40b97e98a5889591fb1f2jpeg.jpeg?imageMogr/format/webp/thumbnail/!60x60r/gravity/Center/crop/60x60/" alt="">
                        </div>
                        <p class="data">2017-7-30</p>
                        <p>匿名用户</p>
                        <p>
                        <span><svg viewBox="0 0 22 22" id="rating-star" width="100%" height="100%"><path fill-rule="evenodd" d="M10.986 17.325l-5.438 3.323c-1.175.718-1.868.208-1.55-1.126l1.48-6.202-4.84-4.15c-1.046-.895-.775-1.71.59-1.82l6.353-.51L10.03.95c.53-1.272 1.39-1.266 1.915 0l2.445 5.89 6.353.51c1.372.11 1.632.93.592 1.82l-4.84 4.15 1.478 6.202c.32 1.34-.38 1.84-1.55 1.126l-5.437-3.323z"></path></svg></span>
                        <span><svg viewBox="0 0 22 22" id="rating-star" width="100%" height="100%"><path fill-rule="evenodd" d="M10.986 17.325l-5.438 3.323c-1.175.718-1.868.208-1.55-1.126l1.48-6.202-4.84-4.15c-1.046-.895-.775-1.71.59-1.82l6.353-.51L10.03.95c.53-1.272 1.39-1.266 1.915 0l2.445 5.89 6.353.51c1.372.11 1.632.93.592 1.82l-4.84 4.15 1.478 6.202c.32 1.34-.38 1.84-1.55 1.126l-5.437-3.323z"></path></svg></span>
                        <span><svg viewBox="0 0 22 22" id="rating-star" width="100%" height="100%"><path fill-rule="evenodd" d="M10.986 17.325l-5.438 3.323c-1.175.718-1.868.208-1.55-1.126l1.48-6.202-4.84-4.15c-1.046-.895-.775-1.71.59-1.82l6.353-.51L10.03.95c.53-1.272 1.39-1.266 1.915 0l2.445 5.89 6.353.51c1.372.11 1.632.93.592 1.82l-4.84 4.15 1.478 6.202c.32 1.34-.38 1.84-1.55 1.126l-5.437-3.323z"></path></svg></span>
                        <span><svg viewBox="0 0 22 22" id="rating-star" width="100%" height="100%"><path fill-rule="evenodd" d="M10.986 17.325l-5.438 3.323c-1.175.718-1.868.208-1.55-1.126l1.48-6.202-4.84-4.15c-1.046-.895-.775-1.71.59-1.82l6.353-.51L10.03.95c.53-1.272 1.39-1.266 1.915 0l2.445 5.89 6.353.51c1.372.11 1.632.93.592 1.82l-4.84 4.15 1.478 6.202c.32 1.34-.38 1.84-1.55 1.126l-5.437-3.323z"></path></svg></span>
                        <span><svg viewBox="0 0 22 22" id="rating-star" width="100%" height="100%"><path fill-rule="evenodd" d="M10.986 17.325l-5.438 3.323c-1.175.718-1.868.208-1.55-1.126l1.48-6.202-4.84-4.15c-1.046-.895-.775-1.71.59-1.82l6.353-.51L10.03.95c.53-1.272 1.39-1.266 1.915 0l2.445 5.89 6.353.51c1.372.11 1.632.93.592 1.82l-4.84 4.15 1.478 6.202c.32 1.34-.38 1.84-1.55 1.126l-5.437-3.323z"></path></svg></span>
                        </p>
                        <p>份量够足的...好饱...配送上门...配送员还是老乡，哈哈哈...</p>
                        <ul class="lei">
                            <li>薯条(大)</li>
                        </ul>
                    </div>
                </dl>
            </div>
        </div>
    </div>     
  </div>
</template>

<script>
export default{
  name: 'appraise'
}
</script>

<style scoped lang="scss">
@import '../../../static/hotcss/px2rem.scss';
    .estimate{
        margin-top: px2rem(350);
        .see{
            padding:px2rem(30);
            background-color: #fff;
            display: flex;
            color: #666;
            font-size:px2rem(28);
            margin-bottom:px2rem(20);
            .r-see{
                padding-right:px2rem(30);
                border-right: 1px solid #ddd;
                text-align: center;
                line-height: px2rem(45);
                h1{
                    font-size:px2rem(55);
                    font-weight: 400;
                    color : #f60;
                }
                p:nth-child(3){
                    font-size: px2rem(20);
                }
            }
            .l-see{
                line-height: px2rem(45);
                padding-left: px2rem(50);
                div{
                    display:flex;
                    div{
                        padding-left: px2rem(30);  
                       svg{
                             height: px2rem(20);
                              width: px2rem(20);
                        
                        }
                    }
                    .math{
                        padding-left: px2rem(30);
                        color: #f60;
                    }
                }
                .d-time{
                    span:nth-child(2){
                        padding-left: px2rem(30);  
                        font-size: px2rem(20);
                    }
                }
            }
        }
        .talk{
            background:#fff;
            padding:0 px2rem(24);
            overflow: auto;
            .choose{
                border-bottom: 1px solid #ccc;
                padding:px2rem(20) 0;
                width:px2rem(702);
                ul{
                    display: flex;
                     flex-wrap:wrap; 
                    justify-content:space-between;
                    align-content:space-around;
                    li{
                        width:px2rem(148.89);
                        line-height:px2rem(62);
                        background:#ebf5ff;
                        color: #6d7885;
                        padding:px2rem(2);
                        text-align:center;
                        font-size:px2rem(25);
                        border-radius:px2rem(20);
                    }
                    .move{
                        color: #fff;
                        background-color: #3190e8;
                    }
                }
            }
            .say{
                padding:px2rem(30) 0;
                .user{
                    padding-left: px2rem(90);
                    font-size:px2rem(28);
                    line-height:px2rem(40);
                    position:relative;
                    color: #666;
                    svg{
                         height: px2rem(20);
                         width: px2rem(20);
                    }
                    .img{
                        position: absolute;
                        left:px2rem(5);
                    }
                    .data{
                        position: absolute;
                        right:px2rem(20);
                        color: #999;
                    }
                    .lei{
                        border:1px solid #ccc;
                        width:px2rem(120);
                        li{
                            padding-left:px2rem(20);
                            width:px2rem(95);
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            color: #999;
                            font-size:px2rem(24);
                            
                        }
                       
                    }
                }
            }
        }
    }

</style>